iT邦幫忙

2025 iThome 鐵人賽

DAY 14
0

自定義元件的插槽

元件插槽的基本用法

  • 對支援插槽的元件來說,也可以為插槽新增預設的內容,這樣當元件在使用時,如果沒有設定插槽內容,就會自動著色預設的內容,範例如下:
<div id="Application">
  <my-container></my-container>
</div>
<script>
    const App = Vue.createApp({
    })
    const containerComponent = {
        template:'<div style="border-style:solid;border-color:red; border-width:10px"><slot>插槽的預設內容</slot></div>'
    }
    App.component("my-container", containerComponent)
    App.mount("#Application")
</script>
  • 注意,一旦元件在使用時設定了插槽的內容,預設的內容就不會再被著色。

上一篇
Day 27
下一篇
Day 29
系列文
從零開始學習TypeScript、Vue.js !!30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言